<!doctype html>
<html class="no-js" lang="zxx">
<head>
    <meta charset="utf-8">
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <title>Photographer</title>
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="shortcut icon" type="image/x-icon" href="assets/img/icon/favicon.png">

    <link rel="stylesheet" href="assets/css/bootstrap.min.css">
    <link rel="stylesheet" href="assets/css/owl.carousel.min.css">
    <link rel="stylesheet" href="assets/css/slicknav.css">
    <link rel="stylesheet" href="assets/css/animate.min.css">
    <link rel="stylesheet" href="assets/css/magnific-popup.css">
    <link rel="stylesheet" href="assets/css/fontawesome-all.min.css">
    <link rel="stylesheet" href="assets/css/themify-icons.css">
    <link rel="stylesheet" href="assets/css/slick.css">
    <link rel="stylesheet" href="assets/css/nice-select.css">
    <link rel="stylesheet" href="assets/css/style.css">

    <style>
        #mood-section {
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
            background-color: #f6f8fa;
            color: #24292e;
            padding: 50px 0;
        }
        #mood-section .main-container {
            width: max-content;
            max-width: 900px;
            margin: auto;
        }
        /* 卡片式容器样式 */
        #mood-section .card {
            background-color: #ffffff;
            border: 1px solid #d1d5da;
            border-radius: 6px;
            padding: 24px;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
            margin-bottom: 20px;
        }
        #mood-section .graph-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 16px;
        }
        #mood-section .graph-title {
            font-size: 16px;
        }
        #mood-section .year-switcher button {
            background-color: #f6f8fa;
            border: 1px solid rgba(27, 31, 35, 0.15);
            border-radius: 6px;
            padding: 5px 16px;
            font-size: 14px;
            cursor: pointer;
            margin-left: 5px;
            transition: background-color 0.2s;
            color: #24292e; /* <-- 添加这一行 */
        }
        #mood-section .year-switcher button:hover {
            background-color: #f3f4f6;
        }
        #mood-section .year-switcher button.active {
            background-color: #0366d6;
            color: white !important; /* 修复字体颜色问题 */
            border-color: #0366d6;
        }
        #mood-section .graph-area {
            display: grid;
            grid-template-rows: repeat(7, 1fr);
            grid-auto-flow: column;
            gap: 4px;
        }
        #mood-section .day {
            width: 12px;
            height: 12px;
            background-color: #ebedf0;
            border-radius: 2px;
        }
        #mood-section .day[data-date]:hover {
            outline: 1px solid #0366d6;
        }
        #tooltip {
            position: absolute;
            background-color: #24292e;
            color: white;
            padding: 8px 12px;
            border-radius: 6px;
            font-size: 12px;
            pointer-events: none;
            display: none;
            white-space: nowrap;
            z-index: 1000;
        }
        #tooltip::after {
            content: '';
            position: absolute;
            bottom: -5px;
            left: 50%;
            transform: translateX(-50%);
            border-width: 5px;
            border-style: solid;
            border-color: #24292e transparent transparent transparent;
        }
        #mood-section .legend-container {
            display: flex;
            justify-content: flex-end;
            align-items: center;
            margin-top: 16px;
            font-size: 12px;
            color: #586069;
        }
        #mood-section .legend-item {
            display: flex;
            align-items: center;
            margin-left: 10px;
        }
        #mood-section .legend-color {
            width: 12px;
            height: 12px;
            border-radius: 2px;
            margin-right: 5px;
        }
        #mood-section .month-labels {
            display: flex;
            font-size: 12px;
            color: #586069;
            margin-bottom: 5px;
            padding-left: 28px;
            position: relative;
            height: 15px;
        }
        #mood-section .month-label {
            position: absolute;
        }
        #mood-section .main-graph-wrapper {
            display: flex;
        }
        #mood-section .day-labels {
            display: flex;
            flex-direction: column;
            justify-content: space-around;
            font-size: 12px;
            color: #586069;
            padding-right: 10px;
            padding-top: 15px;
            padding-bottom: 15px;
        }
        /* 新的统计区域样式 */
        #mood-section #radar-card-container {
            display: flex;
            justify-content: center;
            align-items: center;
            padding: 10px;
        }
        #mood-section .radar-chart-container {
            width: 250px;
            height: 250px;
            border: 2px solid #cccccc;
            border-radius: 50%;
            padding: 10px;
            box-sizing: border-box;
        }
        #mood-section .percentage-cards-container {
            display: flex;
            gap: 20px;
            justify-content: center;
            margin-bottom: 20px;
        }
        #mood-section .stat-percentage-card {
            flex: 1;
            text-align: center;
            padding: 20px;
            background-color: #ffffff;
            border: 1px solid #e1e4e8;
            border-radius: 12px;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
            color: #24292e;
        }
        #mood-section .stat-percentage-card .stat-label {
            font-size: 14px;
            color: #586069;
            margin-bottom: 10px;
        }
        #mood-section .stat-percentage-card .stat-value {
            font-size: 2.5rem;
            font-weight: 600;
        }
        #mood-section .stat-percentage-card .stat-value small {
            font-size: 1.5rem;
        }
        /* 新的曲线图样式 */
        #mood-section .chart-container {
            padding-bottom: 10px;
        }
        #mood-section .xaxis-container {
            display: flex;
            justify-content: space-around;
            align-items: center;
            background-color: #fff;
            border-radius: 12px;
            box-shadow: 0 6px 15px rgba(0, 0, 0, 0.1);
            padding: 10px 0;
            margin: 20px 20px 0 20px; /* 调整了margin-top */
            position: relative;
            z-index: 10;
        }
        #mood-section .xaxis-label {
            font-size: 14px;
            color: #586069;
        }
    </style>
</head>
<body>
    <header>
        <div class="header-area header-transparent">
            <div class="main-header header-sticky">
                <div class="container-fluid">
                    <div class="row">
                        <div class="col-xl-12">
                            <div class="d-flex justify-content-between flex-wrap align-items-center">
                                <div class="logo">
                                    <a href="index.html"><img src="assets/img/logo/logo.png" alt=""></a>
                                </div>
                                <div class="main-menu d-none d-lg-block text-center">
                                    <nav>
                                        <ul id="navigation">
                                            <li><a href="index.html">Home</a></li>
                                            <li><a href="photo.html">Photo</a></li>
                                            <li><a href="journey.html">Journey</a></li>
                                            <li><a href="mood.html">Mood</a></li>
                                            <li><a href="tool.html">Tool</a></li>
                                        </ul>
                                    </nav>
                                </div>
                            </div>
                        </div>
                        <div class="col-12">
                            <div class="mobile_menu d-block d-lg-none"></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </header>
    <main>
        <div class="slider-area">
            <div class="single-slider slider-bg4 hero-overly slider-height2 d-flex align-items-end">
                <div class="container">
                    <div class="row">
                        <div class="col-xxl-12">
                            <div class="hero-caption hero-caption2 text-center">
                                <p>Explore</p>
                                <div class="generator-title" style="font-family: 'Microsoft YaHei', 'SimHei', '黑体', sans-serif !important; font-size: 1.75rem !important; font-weight: bold !important; text-align: center !important; color: #ffffff !important; margin-bottom: 0.5rem !important;">记录一个人的心情</div>
                                <h2></h2>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        
        <section id="mood-section">
            <div class="main-container">
                <div class="card" id="calendar-container">
                    <div class="graph-header">
                        <h2 class="graph-title">My Mood Calendar</h2>
                        <div class="year-switcher" id="year-switcher">
                            <button class="active" data-year="2024">2024</button>
                            <button data-year="2025">2025</button>
                            <button data-year="2026">2026</button>
                            <button data-year="2027">2027</button>
                        </div>
                    </div>
                    <div class="month-labels" id="month-labels-container"></div>
                    <div class="main-graph-wrapper">
                        <div class="day-labels">
                            <span>1</span>
                            <span>2</span>
                            <span>3</span>
                        </div>
                        <div class="graph-area" id="graph-area"></div>
                    </div>
                    <div class="legend-container" id="legend">
                        <span>Less</span>
                        <div class="legend-item"><div class="legend-color" style="background-color: #ebedf0;"></div>无记录</div>
                        <span>&ensp; More</span>
                    </div>
                </div>
            
                <div class="card" id="radar-card-container">
                    <div class="generator-title" style="font-family: 'Microsoft YaHei', 'SimHei', '黑体', sans-serif !important; font-size: 1rem !important; font-weight: bold !important; text-align: center !important; color: #334155 !important; margin-bottom: 0.5rem !important;">年度心情雷达图</div>
                    <div class="radar-chart-container">
                        <canvas id="moodRadarChart"></canvas>
                    </div>
                </div>

                <div class="percentage-cards-container" id="stats-percentage-area">
                    </div>
            
                <div class="card chart-container">
                    <div class="generator-title" style="font-family: 'Microsoft YaHei', 'SimHei', '黑体', sans-serif !important; font-size: 1rem !important; font-weight: bold !important; text-align: center !important; color: #334155 !important; margin-bottom: 0.5rem !important;">年度心情曲线</div>
                    <canvas id="moodLineChart"></canvas>
                    <div class="xaxis-container" id="xaxis-container"></div>
                </div>
            </div>
            
            <div id="tooltip"></div>
        </section>
        </main>
    <footer>
        <div class="footer-area footer-padding">
            <div class="footer-wrapper ">
                <div class="container">
                    <div class="row d-flex justify-content-between">
                        <div class="col-xl-3 col-lg-4 col-md-6 col-sm-6">
                            <div class="single-footer-caption mb-50">
                                <div class="single-footer-caption mb-30">
                                    <div class="footer-logo mb-25">
                                        <a href="index.html"><img src="assets/img/logo/logo2_footer.png" alt=""></a>
                                    </div>
                                    <div class="footer-tittle">
                                        <div class="footer-pera">
                                            <p>终点不重要 出发最重要</p>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="offset-xl-1 col-xl-2 col-lg-2 col-md-4 col-sm-5">
                            <div class="single-footer-caption mb-50">
                                <div class="footer-tittle">
                                    <h4>Navigation</h4>
                                    <ul>
                                        <li><a href="#">Home</a></li>
                                        <li><a href="#">About</a></li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                        <div class="col-xl-2 col-lg-2 col-md-4 col-sm-5">
                            <div class="single-footer-caption mb-50">
                                <div class="footer-tittle">
                                    <h4>Contact</h4>
                                    <ul>
                                        <li><a href="#">Xi'an, China</a></li>
                                        <li class="number2"><a href="#">normalsunday@qq.com</a></li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                </div>
        </div>
    </footer>
    <div id="back-top">
        <a class="wrapper" title="Go to Top" href="#">
            <div class="arrows-container">
                <div class="arrow arrow-one">
                </div>
                <div class="arrow arrow-two">
                </div>
            </div>
        </a>
    </div>

    <script src="./assets/js/vendor/modernizr-3.5.0.min.js"></script>
    <script src="./assets/js/vendor/jquery-1.12.4.min.js"></script>
    <script src="./assets/js/popper.min.js"></script>
    <script src="./assets/js/bootstrap.min.js"></script>
    <script src="./assets/js/owl.carousel.min.js"></script>
    <script src="./assets/js/slick.min.js"></script>
    <script src="./assets/js/jquery.slicknav.min.js"></script>
    <script src="./assets/js/hover-direction-snake.min.js"></script>
    <script src="./assets/js/wow.min.js"></script>
    <script src="./assets/js/jquery.magnific-popup.js"></script>
    <script src="./assets/js/jquery.nice-select.min.js"></script>
    <script src="./assets/js/jquery.counterup.min.js"></script>
    <script src="./assets/js/waypoints.min.js"></script>
    <script src="./assets/js/contact.js"></script>
    <script src="./assets/js/jquery.form.js"></script>
    <script src="./assets/js/jquery.validate.min.js"></script>
    <script src="./assets/js/mail-script.js"></script>
    <script src="./assets/js/jquery.ajaxchimp.min.js"></script>
    <script src="./assets/js/plugins.js"></script>
    <script src="./assets/js/main.js"></script>

    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-annotation@3.0.1/dist/chartjs-plugin-annotation.min.js"></script>
    <script>
        // =========================================================================
        //                              配置区域
        // =========================================================================
        const moodConfig = {
            // <-- 修改点: 更新计分规则
            '1': { label: '命苦', color: '#ffcccb', score: -1 }, // 淡红色
            '2': { label: '冷漠', color: '#add8e6', score: 0 },  // 淡蓝色
            '3': { label: '快乐', color: '#90ee90', score: 1 },  // 淡绿色
        };
    
        const moodData = {
            '2024': {
                '1': { '1': 3, '2': 3, '3': 3, '4': 3, '5': 3, '6': 3, '7': 3, '8': 3, '9': 3, '10': 3, '11': 3, '12': 3, '13': 3, '14': 3, '15': 3, '16': 3, '17': 3, '18':3, '19': 3, '20': 3, '21': 3, '22': 3, '23': 3, '24': 3, '25': 3, '26': 3, '27': 3, '28': 3, '29': 3, '30': 3 , '31': 3 },
                '2': { '1': 3, '2': 3, '3': 3, '4': 3, '5': 3, '6': 3, '7': 3, '8': 3, '9': 3, '10': 3, '11': 3, '12': 3, '13': 3, '14': 3, '15': 3, '16': 3, '17': 3, '18':3, '19': 3, '20': 3, '21': 3, '22': 3, '23': 3, '24': 3, '25': 3, '26': 3, '27': 3, '28': 3, '29': 3, '30': 3 , '31': 3 },
                '3': { '1': 3, '2': 3, '3': 3, '4': 3, '5': 3, '6': 3, '7': 3, '8': 3, '9': 3, '10': 3, '11': 3, '12': 3, '13': 3, '14': 3, '15': 3, '16': 3, '17': 3, '18':3, '19': 3, '20': 3, '21': 3, '22': 3, '23': 3, '24': 3, '25': 3, '26': 3, '27': 3, '28': 3, '29': 3, '30': 3 , '31': 3 },
                '4': { '1': 3, '2': 3, '3': 3, '4': 3, '5': 3, '6': 3, '7': 3, '8': 3, '9': 3, '10': 3, '11': 3, '12': 3, '13': 3, '14': 3, '15': 3, '16': 3, '17': 3, '18':3, '19': 3, '20': 3, '21': 3, '22': 3, '23': 3, '24': 3, '25': 3, '26': 3, '27': 3, '28': 3, '29': 3, '30': 3 , '31': 3 },
                '5': { '1': 3, '2': 3, '3': 3, '4': 3, '5': 3, '6': 3, '7': 3, '8': 3, '9': 3, '10': 3, '11': 3, '12': 3, '13': 3, '14': 3, '15': 3, '16': 3, '17': 3, '18':3, '19': 3, '20': 3, '21': 3, '22': 3, '23': 3, '24': 3, '25': 3, '26': 3, '27': 3, '28': 3, '29': 3, '30': 3 , '31': 3 },
                '6': { '1': 3, '2': 3, '3': 3, '4': 3, '5': 3, '6': 3, '7': 3, '8': 3, '9': 3, '10': 3, '11': 3, '12': 3, '13': 3, '14': 3, '15': 3, '16': 3, '17': 3, '18':3, '19': 3, '20': 3, '21': 3, '22': 3, '23': 3, '24': 3, '25': 3, '26': 3, '27': 3, '28': 3, '29': 3, '30': 3 , '31': 3 },
                '7': { '1': 3, '2': 3, '3': 3, '4': 3, '5': 3, '6': 3, '7': 3, '8': 3, '9': 3, '10': 3, '11': 3, '12': 3, '13': 3, '14': 3, '15': 3, '16': 3, '17': 3, '18':3, '19': 3, '20': 3, '21': 3, '22': 3, '23': 3, '24': 3, '25': 3, '26': 3, '27': 3, '28': 3, '29': 3, '30': 3 , '31': 3 },
                '8': { '1': 3, '2': 3, '3': 3, '4': 3, '5': 3, '6': 3, '7': 3, '8': 3, '9': 3, '10': 3, '11': 3, '12': 3, '13': 3, '14': 3, '15': 3, '16': 3, '17': 3, '18':3, '19': 3, '20': 3, '21': 3, '22': 3, '23': 3, '24': 3, '25': 3, '26': 3, '27': 3, '28': 3, '29': 3, '30': 3 , '31': 3 },
                 '9': { '1': 1, '2': 1, '3': 1, '4': 1, '5': 1, '6': 1, '7': 1, '8': 1, '9': 1, '10': 1, '11': 1, '12': 1, '13': 1, '14': 1, '15': 1, '16': 1, '17': 1, '18': 1, '19': 1, '20': 1, '21': 1, '22': 1, '23': 1, '24': 1, '25': 1, '26': 1, '27': 1, '28': 1, '29': 1, '30': 1 },
                 '10': { '1': 3, '2': 3, '3': 3, '4': 3, '5': 3, '6': 3, '7': 3, '8': 1, '9': 1, '10': 1, '11': 1, '12': 1, '13': 1, '14': 1, '15': 1, '16': 1, '17': 1, '18': 1, '19': 1, '20': 1, '21': 1, '22': 1, '23': 1, '24': 1, '25': 1, '26': 1, '27': 1, '28': 1, '29': 1, '30': 1 , '31': 1 },
                 '11': { '1': 1, '2': 1, '3': 1, '4': 1, '5': 1, '6': 1, '7': 1, '8': 1, '9': 1, '10': 1, '11': 1, '12': 1, '13': 1, '14': 1, '15': 1, '16': 1, '17': 1, '18': 1, '19': 1, '20': 1, '21': 1, '22': 1, '23': 1, '24': 1, '25': 1, '26': 1, '27': 1, '28': 1, '29': 1, '30': 1 },
                 '12': { '1': 1, '2': 1, '3': 1, '4': 1, '5': 1, '6': 1, '7': 1, '8': 1, '9': 1, '10': 1, '11': 1, '12': 1, '13': 1, '14': 1, '15': 1, '16': 1, '17': 1, '18': 1, '19': 1, '20': 1, '21': 1, '22': 1, '23': 1, '24': 1, '25': 1, '26': 1, '27': 1, '28': 1, '29': 1, '30': 1 , '31': 1 },
            },
            '2025': {
                '1': { '1': 3, '2': 3, '3': 3, '4': 2, '5': 2, '6': 2, '7': 2, '8': 2, '9': 2, '10': 2, '11': 2, '12': 2, '13': 2, '14': 2, '15': 2, '16': 2, '17': 2, '18':2, '19': 2, '20': 2, '21': 3, '22': 3, '23': 3, '24': 3, '25': 3, '26': 3, '27': 3, '28': 3, '29': 3, '30': 3 , '31': 3 },
                '2': { '1': 3, '2': 3, '3': 3, '4': 3, '5': 3, '6': 1, '7': 1, '8': 2, '9': 2, '10': 1, '11': 1, '12': 1, '13': 1, '14': 1, '15': 2, '16': 2, '17': 1, '18': 1, '19': 1, '20': 1, '21': 1, '22': 2, '23': 2, '24': 1, '25': 1, '26': 1, '27': 1, '28': 1, '29': 2, '30': 1},
                '3': { '1': 2, '2': 2, '3': 1, '4': 1, '5': 1, '6': 1, '7': 1, '8': 2, '9': 2, '10': 1, '11': 1, '12': 1, '13': 1, '14': 1, '15': 2, '16': 2, '17': 1, '18': 1, '19': 1, '20': 1, '21': 1, '22': 2, '23': 2, '24': 1, '25': 1, '26': 1, '27': 1, '28': 1, '29': 2, '30': 2 ,'31': 1 },
                '4': { '1': 1, '2': 1, '3': 1, '4': 3, '5': 3, '6': 3, '7': 1, '8': 1, '9': 1, '10': 1, '11': 1, '12': 2, '13': 2, '14': 1, '15': 1, '16': 1, '17': 1, '18': 1, '19': 2, '20': 2, '21': 1, '22': 1, '23': 1, '24': 1, '25': 1, '26': 2, '27': 2, '28': 1, '29': 1, '30': 1 },
                '5': { '1': 3, '2': 3, '3': 3, '4': 3, '5': 3, '6': 1, '7': 1, '8': 1, '9': 1, '10': 2, '11': 2, '12': 1, '13': 1, '14': 1, '15': 1, '16': 1, '17': 2, '18': 2, '19': 1, '20': 1, '21': 1, '22': 1, '23': 1, '24': 2, '25': 2, '26': 1, '27': 1, '28': 1, '29': 1, '30': 1,'31': 3 },
                '6': { '1': 3, '2': 3, '3': 1, '4': 1, '5': 1, '6': 1, '7': 2, '8': 2, '9': 1, '10': 1, '11': 1, '12': 1, '13': 1, '14': 2, '15': 2, '16': 1, '17': 1, '18': 1, '19': 1, '20': 1, '21': 2, '22': 2, '23': 1, '24': 1, '25': 1, '26': 1, '27': 1, '28': 2, '29': 2, '30': 1 },
                '7': { '1': 1, '2': 1, '3': 1, '4': 1, '5': 2, '6': 2, '7': 1, '8': 1, '9': 1, '10': 1, '11': 1, '12': 2, '13': 2, '14': 1, '15': 1, '16': 1, '17': 1, '18': 1, '19': 2, '20': 2, '21': 1, '22': 1, '23': 1, '24': 1, '25': 1, '26': 2, '27': 2, '28': 1, '29': 1, '30': 1 ,'31': 1,},
                '8': { '1': 3, '2': 3, '3': 3, '4': 3, '5': 3, '6': 3, '7': 3, '8': 3, '9': 3, '10': 3, '11': 3, '12': 1, '13': 1, '14': 1, '15': 1, '16': 1, '17': 2, '18': 1, '19': 1, '20': 1, '21': 1, '22': 1, '23': 1, },

            },
            '2026': {
                '2': { '20': 2 },
                '5': { '1': 3, '2': 3, '3': 3, '4': 2 },
            },
            '2027': {
                '7': { '1': 1, '2': 1, '3': 2, '4': 3 },
            }
        };
    
        // =========================================================================
        //                              脚本核心逻辑
        // =========================================================================
        
        document.addEventListener('DOMContentLoaded', function() {
            const yearSwitcher = document.getElementById('year-switcher');
            let currentLineChart = null;
            let currentRadarChart = null;
            let currentYear = new Date().getFullYear();
    
            function renderYear(year) {
                // 清理旧内容
                document.getElementById('graph-area').innerHTML = '';
                document.getElementById('month-labels-container').innerHTML = '';
                document.getElementById('stats-percentage-area').innerHTML = '';
    
                const yearData = moodData[year] || {};
                const moodMap = new Map();
                for (const month in yearData) {
                    for (const day in yearData[month]) {
                        const dateStr = `${year}-${String(month).padStart(2, '0')}-${String(day).padStart(2, '0')}`;
                        moodMap.set(dateStr, String(yearData[month][day]));
                    }
                }
    
                const isLeap = (year % 4 === 0 && year % 100 !== 0) || (year % 400 === 0);
                const totalDays = isLeap ? 366 : 365;
    
                renderCalendar(year, moodMap);
                const moodCounts = calculateMoodCounts(moodMap);
                renderStats(moodCounts, totalDays);
                renderLineChart(year, totalDays, moodMap);
            }
            
            function renderCalendar(year, moodMap) {
                const graphArea = document.getElementById('graph-area');
                const monthLabelsContainer = document.getElementById('month-labels-container');
                const startDate = new Date(year, 0, 1);
                const endDate = new Date(year, 11, 31);
                let dayOfWeek = startDate.getDay();
                let startDayOffset = (dayOfWeek === 0) ? 6 : dayOfWeek - 1;
    
                for (let i = 0; i < startDayOffset; i++) {
                    graphArea.appendChild(document.createElement('div'));
                }
    
                const monthPositions = [];
                let lastMonth = -1;
                let dayCounter = 0;
    
                for (let d = new Date(startDate); d <= endDate; d.setDate(d.getDate() + 1)) {
                    dayCounter++;
                    const dayElement = document.createElement('div');
                    const dateString = d.toISOString().split('T')[0];
                    dayElement.classList.add('day');
                    dayElement.dataset.date = dateString;
    
                    const mood = moodMap.get(dateString);
                    if (mood && moodConfig[mood]) {
                        dayElement.style.backgroundColor = moodConfig[mood].color;
                        dayElement.dataset.mood = moodConfig[mood].label;
                    }
                    graphArea.appendChild(dayElement);
    
                    const currentMonth = d.getMonth();
                    if (currentMonth !== lastMonth) {
                        const weekIndex = Math.floor((dayCounter + startDayOffset - 1) / 7);
                        monthPositions.push({ month: currentMonth, week: weekIndex });
                        lastMonth = currentMonth;
                    }
                }
                
                const monthNames = ["一", "二", "三", "四", "五", "六", "七", "八", "九", "十", "十一", "十二"].map(n => n + '月');
                monthPositions.forEach((pos) => {
                    const monthLabel = document.createElement('span');
                    monthLabel.textContent = monthNames[pos.month];
                    monthLabel.className = 'month-label';
                    monthLabel.style.left = `${pos.week * 16+20}px`;
                    monthLabelsContainer.appendChild(monthLabel);
                });
                
                updateLegend();
            }
    
            function calculateMoodCounts(moodMap) {
                const moodCounts = { '1': 0, '2': 0, '3': 0 };
                moodMap.forEach(mood => {
                    if (moodCounts.hasOwnProperty(mood)) moodCounts[mood]++;
                });
                return moodCounts;
            }
    
            function renderStats(moodCounts, totalDays) {
                const percentageArea = document.getElementById('stats-percentage-area');
    
                Object.keys(moodConfig).forEach(moodKey => {
                    const moodInfo = moodConfig[moodKey];
                    const percentage = totalDays > 0 ? ((moodCounts[moodKey] / totalDays) * 100).toFixed(1) : "0.0";
                    
                    // Create Percentage Card
                    const percentageCard = document.createElement('div');
                    percentageCard.className = 'stat-percentage-card card';
                    percentageCard.innerHTML = `
                        <div class="stat-label">${moodInfo.label}</div>
                        <div class="stat-value">
                            ${percentage}<small>%</small>
                        </div>
                    `;
                    percentageArea.appendChild(percentageCard);
                });
    
    
                const radarCtx = document.getElementById('moodRadarChart').getContext('2d');
                if (currentRadarChart) currentRadarChart.destroy();
                
                // 从所有心情分数中找到最大值
                const maxScore = Math.max(...Object.values(moodCounts));
                currentRadarChart = new Chart(radarCtx, {
                    type: 'radar',
                    data: {
                        labels: Object.values(moodConfig).map(m => m.label),
                        datasets: [
                                    {
                                        label: '心情累计次数', // <-- 修改标签
                                        data: Object.keys(moodConfig).map(key => moodCounts[key]), // <-- 修改数据源
                                        backgroundColor: 'rgba(173, 216, 230, 0.5)', // 淡蓝色填充
                                        borderColor: 'transparent', // 隐藏填充区域的边框
                                        pointRadius: 0, // 隐藏填充区域的点
                                    },
                                    {
                                       label: '心情累计次数 (Line)', // <-- 修改标签
                                        data: Object.keys(moodConfig).map(key => moodCounts[key]), // <-- 修改数据源
                                        backgroundColor: 'transparent', // 线条层不填充
                                        borderColor: 'rgb(173, 216, 230)', // 淡蓝色边框
                                        borderWidth: 2,
                                        pointBackgroundColor: Object.values(moodConfig).map(m => m.color),
                                        pointBorderColor: Object.values(moodConfig).map(m => m.color),
                                        pointRadius: 5,
                                        pointHoverRadius: 7,
                                    }
                                ]
                    },
                    options: {
                        responsive: true,
                        maintainAspectRatio: false,
                        plugins: { legend: { display: false } },
                        scales: {
                            r: {
                                angleLines: { display: false },
                                grid: { 
                                    color: '#f0f0f0',
                                    circular: true,
                                },
                                pointLabels: { 
                                    display: false,
                                }, 
                                ticks: { 
                                    display: false,
                                    count: 4
                                },
                                // <-- 修改点 开始 -->
                                beginAtZero: true, // 确保从0开始
                                suggestedMax: maxScore * 1.25 // 建议最大值比数据最大值大25%，留出空间
                                // <-- 修改点 结束 -->
                            }
                        }
                    }
                });
            }
    
            function renderLineChart(year, totalDays, moodMap) {
                const chartData = { labels: [], scores: [] };
                let cumulativeScore = 0;
                for (let i = 1; i <= totalDays; i++) {
                    const d = new Date(year, 0, i);
                    const dateString = d.toISOString().split('T')[0];
                    chartData.labels.push(`${d.getMonth()+1}/${d.getDate()}`);
                    const mood = moodMap.get(dateString);
                    if (mood && moodConfig[mood]) {
                        cumulativeScore += moodConfig[mood].score;
                    }
                    chartData.scores.push(cumulativeScore);
                }

                const lineCtx = document.getElementById('moodLineChart').getContext('2d');
                
                if (currentLineChart) currentLineChart.destroy();
                currentLineChart = new Chart(lineCtx, {
                    type: 'line',
                    data: {
                        labels: chartData.labels,
                        datasets: [{
                            label: `${year}年心情累积分数`,
                            data: chartData.scores,
                            borderWidth: 3,
                            pointRadius: 0,
                            fill: false,
                            tension: 0.4,
                            
                            // --- 修改点：添加 segment 配置 ---
                            segment: {
                                // 如果线段起点的Y值大于等于0，颜色为绿色，否则为红色
                                borderColor: ctx => (ctx.p0.parsed.y >= 0 ? 'green' : 'red'),
                                borderWidth: 3, // 确保分段后线条宽度一致
                            }
                            // --- 修改结束 ---
                        }]
                    },
                    options: {
                        scales: { 
                            x: { 
                                grid: { display: false },
                                border: { display: false },
                                ticks: { display: false }
                            },
                            y: {
                                min: -365,
                                max: 365,
                                grid: { color: '#f0f0f0' },
                                border: { display: false },
                                ticks: { padding: 10 }
                            }
                        },
                        plugins: { 
                            legend: { display: false },
                            annotation: {
                                annotations: {
                                    baseline: {
                                        type: 'line',
                                        yMin: 0,
                                        yMax: 0,
                                        borderColor: 'blue',
                                        borderWidth: 2,
                                        borderDash: [5, 5]
                                    },
                                    happyLabel: {
                                        type: 'label',
                                        content: '开心',
                                        position: 'end',
                                        xValue: '100%',
                                        yValue: 0,
                                        font: { size: 12 },
                                        color: 'green',
                                        yAdjust: -10
                                    },
                                    sadLabel: {
                                        type: 'label',
                                        content: '命苦',
                                        position: 'end',
                                        xValue: '100%',
                                        yValue: 0,
                                        font: { size: 12 },
                                        color: 'red',
                                        yAdjust: 35
                                    }
                                }
                            }
                        }
                    }
                });

                // 填充自定义X轴容器
                const xaxisContainer = document.getElementById('xaxis-container');
                xaxisContainer.innerHTML = ''; // 清理旧标签
                const monthNames = ["一月", "二月", "三月", "四月", "五月", "六月", "七月", "八月", "九月", "十月", "十一月", "十二月"];
                monthNames.forEach(month => {
                    const labelEl = document.createElement('div');
                    labelEl.className = 'xaxis-label';
                    labelEl.textContent = month;
                    xaxisContainer.appendChild(labelEl);
                });
            }
            
            function updateLegend() {
                const legendContainer = document.getElementById('legend');
                legendContainer.querySelectorAll('.legend-item').forEach(el => el.remove());
                const legendFragment = document.createDocumentFragment();
                Object.values(moodConfig).forEach(mood => {
                    const item = document.createElement('div');
                    item.className = 'legend-item';
                    item.innerHTML = `<div class="legend-color" style="background-color: ${mood.color};"></div>${mood.label}`;
                    legendFragment.appendChild(item);
                });
                legendContainer.insertBefore(legendFragment, legendContainer.children[1]);
            }
    
            yearSwitcher.addEventListener('click', function(e) {
                if (e.target.tagName === 'BUTTON') {
                    const selectedYear = e.target.dataset.year;
                    if (selectedYear) {
                        yearSwitcher.querySelector('.active').classList.remove('active');
                        e.target.classList.add('active');
                        currentYear = selectedYear;
                        renderYear(currentYear);
                    }
                }
            });
    
            const graphArea = document.getElementById('graph-area');
            const tooltip = document.getElementById('tooltip');
            graphArea.addEventListener('mouseover', function(e) {
                if (e.target.classList.contains('day') && e.target.dataset.date) {
                    const date = e.target.dataset.date;
                    const mood = e.target.dataset.mood;
                    const dateObj = new Date(date + 'T00:00:00');
                    const formattedDate = `${dateObj.getFullYear()}年${dateObj.getMonth() + 1}月${dateObj.getDate()}日`;
                    
                    tooltip.innerHTML = mood ? `<strong>${mood}</strong> 于 ${formattedDate}` : `无记录于 ${formattedDate}`;
                    tooltip.style.display = 'block';
    
                    const rect = e.target.getBoundingClientRect();
                    tooltip.style.left = `${rect.left + window.scrollX + (rect.width / 2) - (tooltip.offsetWidth / 2)}px`;
                    tooltip.style.top = `${rect.top + window.scrollY - tooltip.offsetHeight - 8}px`;
                }
            });
            graphArea.addEventListener('mouseout', () => { tooltip.style.display = 'none'; });
    
            const currentYearButton = yearSwitcher.querySelector(`[data-year="${currentYear}"]`);
            if (currentYearButton) {
                 yearSwitcher.querySelector('.active').classList.remove('active');
                 currentYearButton.classList.add('active');
            } else {
                currentYear = yearSwitcher.querySelector('button').dataset.year;
                yearSwitcher.querySelector('button').classList.add('active');
            }
            renderYear(currentYear);
        });
    </script>

    
</body>
</html>